const padding = 50; // 内边距
const svgWidth = 450; // SVG元素宽度
const svgHeight = 400; // SVG元素高度
const centerX = svgWidth / 2; // 中心点x坐标
const centerY = svgHeight / 2; // 中心点y坐标
const radius = Math.min(centerX, centerY) - padding; // 半径
const numTicks = 5; // 刻度数量，即多边形共有几个角

function drawRadr(data,radsvg,selector){
    //雷达图
    const angleScale = d3.scaleLinear()
        .domain([0, numTicks])
        .range([0, Math.PI * 2]);

    

    const polygon = radsvg.append("g")
        .attr("class", "polygon");

    const valueScaleArr=[]
    for(i=0;i<numTicks;i++){//分支
        const valueScale = d3.scaleLinear()
                .domain([0, d3.max(data.map(item=>{
                    switch(i){
                        case 0:
                            return item.KDA
                        case 1:
                            return item.participationRate
                        case 2:
                            return item.avgHelp
                        case 3:
                            return item.avgKill
                        case 4:
                            return item.avgDie
                    }
                }))])
                .range([0, radius]);

        valueScaleArr.push(valueScale)

        let angle = angleScale(i);
        let x = centerX + 150 * Math.sin(angle);
        let y = centerY - 150 * Math.cos(angle);

        polygon.append("line")
            .attr("x1", centerX)
            .attr("y1", centerY)
            .attr("x2", x)
            .attr("y2", y)
            .attr("stroke", "#cccccc")
            .attr("stroke-width", 2);
        
        polygon.append("line")
            .attr("x1", x)
            .attr("y1", y)
            .attr("x2", centerX + 150 * Math.sin(angleScale((i+1)%5)))
            .attr("y2", centerY - 150 * Math.cos(angleScale((i+1)%5)))
            .attr("stroke", "#cccccc")
            .attr("stroke-width", 2);
        
    }


    let dataset = [
        { name: 'KDA', value: data[0].KDA, initValue: 0 },
        { name: '参团率', value: data[0].participationRate, initValue: 0 },
        { name: '场均助攻', value: data[0].avgHelp, initValue: 0 },
        { name: '场均击杀', value: data[0].avgKill, initValue: 0 },
        { name: '场均死亡', value: data[0].avgDie, initValue: 0 }
    ];

    const line = d3.line()
        .x((d, i) => {
            return centerX + valueScaleArr[i](d.initValue) * Math.sin(angleScale(i));
        })
        .y((d, i) => {
            return centerY - valueScaleArr[i](d.initValue) * Math.cos(angleScale(i));
        });

    // item=[
    //     { name: 'KDA', value: data[0].KDA, initValue: 0 },
    //     { name: '参团率', value: data[0].participationRate, initValue: 0 },
    //     { name: '场均助攻', value: data[0].avgHelp, initValue: 0 },
    //     { name: '场均击杀', value: data[0].avgKill, initValue: 0 },
    //     { name: '场均死亡', value: data[0].avgDie, initValue: 0 }
    // ]
    const path=radsvg.append("path")
        .data( [dataset] )
        .attr("d", line) 
        .attr("fill", "#81D8CF")
        .attr('opacity','0.75')

    // 添加初始化动画
    path.transition()
        .duration(1000)
        .attrTween("d", function(d) {
            console.log(d)
            const interpolate = d.map((d, i) => {
                return d3.interpolateNumber(d.initValue, d.value);
            });
            return function(t) {
                return line(d.map((d, i) => {
                    return { ...d, initValue: interpolate[i](t) };
                }));
            };
        });

    var labels = radsvg.append("g")
        .attr("class", "labels");
    for (var i = 0; i < numTicks; i++) {
        var angle = angleScale(i);
        var r = radius + padding*0.5;
        var x = centerX + r * Math.sin(angle);
        var y = centerY - r * Math.cos(angle);
        labels.append("text")
            .attr("x", x)
            .attr("y", y)
            .attr("text-anchor", "middle")
            .attr("fill", "#333333")
            .style('font-size','12px')
            .text(dataset[i].name + " " + dataset[i].value);
    }

    selector.selectAll('option')
            .data(data)
            .enter()
            .append('option')
            .html(function(d){
                return d.player
            })
            
    selector.on('change',(e)=>{
        let num=e.target.selectedIndex
        dataset=[ 
            { name:'KDA', value:data[num].KDA ,initValue: 0},
            { name:'参团率', value:data[num].participationRate ,initValue: 0},
            { name:'场均助攻', value:data[num].avgHelp ,initValue: 0},
            { name:'场均击杀', value:data[num].avgKill ,initValue: 0},
            { name:'场均死亡', value:data[num].avgDie ,initValue: 0}
        ]
        
        radsvg.selectAll("path")
            .data([dataset]) 
            .transition()
            .duration(1000)
            .attrTween("d", function(d) {
                const interpolate = d.map((d, i) => {
                    return d3.interpolateNumber(d.initValue, d.value);
                });
                return function(t) {
                    return line(d.map((d, i) => {
                        return { ...d, initValue: interpolate[i](t) };
                    }));
                };
            });

        radsvg.selectAll("text")
                .data(dataset)
                .transition()
                .duration(1000)
                .text(function (d) { return d.name + " " + d.value; });
    })
}
